<template>
    <!-- 风险清单 -->
    <div class="meetingNotice">
        <ul class="header">
            <li @click="changeNav('/meetingNotice')"
                :class="{'currentLi':$route.path === '/meetingNotice'}">会议通知</li>
            <li @click="changeNav('/meetingNotice/meetingRecord')"
                :class="{'currentLi':$route.path === '/meetingNotice/meetingRecord'}">会议记录</li>
            <li @click="changeNav('/meetingNotice/meetingStatistics')"
                :class="{'currentLi':$route.path === '/meetingNotice/meetingStatistics'}">会议统计</li>
        </ul>
        <keep-alive>
            <router-view/>
        </keep-alive>
    </div>
</template>
<script>
export default {
    data () {
        return {
        }
    },
    created () {
        console.log(this.$route.path)
    },
    methods: {
        changeNav (path) {
            this.$router.replace(path)
        }
    }
}
</script>
<style lang="less" scope>
.meetingNotice {
    width: 100%;
    height: 100%;
    background-color: #fff;
    .header {
        width: 100%;
        height: 60px;
        padding-left: 50px;
        background-color: #fff;
        border-bottom: 1px solid #f4f4f4;
        li {
            width: 64px;
            line-height: 60px;
            height: 60px;
            float: left;
            margin-right: 44px;
            color: #999;
            font-size: 16px;
        }
        .currentLi {
            width: 64px;
            line-height: 60px;
            height: 60px;
            float: left;
            margin-right: 44px;
            color: #2269ff;
            font-size: 16px;
            border-bottom: 4px solid #2269ff;
        }
    }
}
</style>
